﻿@using worldcup.Models
@using worldcup.Models.Entity

@{
    ViewBag.Title = "勇敢上场2018世界杯";
    var list = (PostResult<List<NextGames>>)ViewBag.NextGames;
}

<style type="text/css">
    .indexMain {
    }

    .topBar {
        height: 6rem;
        background-color: #fff;
    }

        .topBar .tb {
            height: 5rem;
            padding-top: 0.5rem;
            width: 25%;
            display: inline;
            float: left;
            cursor: pointer;
        }

            .topBar .tb img {
                height: 3rem;
                width: 3rem;
                display: block;
                margin: auto;
            }

            .topBar .tb span {
                display: block;
                padding-top: 0.2rem;
                text-align: center;
                font-size: 1.2rem;
            }

    .gItem {
        width: 90%;
        height: auto;
        margin: auto;
        margin-top: 2rem;
        text-align: center;
        position: relative;
    }

    .gPlayTime {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        z-index: 1;
        font-size: 1.4rem;
        font-weight: bolder;
        color: #bf3939;
    }

    .gMain {
        height: auto;
        background-image: url("/Content/images/gameBk.jpg");
        background-size: cover;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .cy {
        width: 30%;
        height: auto;
        display: inline-block;
        margin-top: 3rem;
    }

        .cy img {
            width: 100%;
            display: block;
        }

        .cy div {
            height: 2.2rem;
            line-height: 2.2rem;
            margin-top: 0.5rem;
            text-align: center;
            color: #fff;
            font-size: 1.2rem;
            background-image: url("/Content/images/btn_black_50.png");
        }

    .vs {
        width: 20%;
        margin-top: 5rem;
    }

    .btnWrap {
        padding: 0.8rem 1.5rem 0 1.5rem;
    }

    .qBtn {
        height: 4rem;
        background-color: #d69393;
        text-align: center;
        line-height: 4rem;
        color: #fff;
        float: left;
        font-size: 1.6rem;
        border-radius: 0.4rem;
        box-sizing: border-box;
    }

    .w2 {
        width: 45%;
        margin-right: 5%;
    }

    .w3 {
        width: 30%;
        margin-right: 5%;
    }

    .qbSel {
        background-color: #bf3939;
    }

    .subBtn {
        height: 4rem;
        width: 100%;
        background-color: #bf3939;
        text-align: center;
        line-height: 4rem;
        color: #fff;
        font-size: 1.6rem;
    }

    .unAvailBtn {
        height: 3rem;
        line-height: 3rem;
        width: 100%;
        background-color: #a5a5a5;
        color: #fff;
        text-align: center;
        font-size: 1.2rem;
    }

    .suDiv {
    }

    .suImgWrap {
        height: 6.5rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        text-align: center;
    }
        .suImgWrap img {
            width: 6.5rem;
        }

    .suTxt1 {
        text-align: center;
        font-size: 1.6rem;
        height: 2.5rem;
    }

    .suTxt2 {
        text-align: center;
        font-size: 1.6rem;
        height: 2.5rem;
    }

        .suTxt2 span {
            color: #88172b;
            font-size: 1.4rem;
        }

    .suBtn {
        height: 4rem;
        background-color: #f5f5f5;
        text-align: center;
        line-height: 4rem;
        font-size: 1.4rem;
        margin-top: 3rem;
    }
</style>

<div class="indexMain">
    <div class="topBar">
        <div class="tb" onclick="sign()">
            <img src="~/Content/images/top/1.png" />
            <span>签到</span>
        </div>
        <div class="tb" onclick="gorank()">
            <img src="~/Content/images/top/2.png" />
            <span>排行榜</span>
        </div>
        <div class="tb" onclick="gojingchai()">
            <img src="~/Content/images/top/3.png" />
            <span>竞猜记录</span>
        </div>
        <div class="tb" onclick="gorule()">
            <img src="~/Content/images/top/4.png" />
            <span>活动说明</span>
        </div>
    </div>


    @if (list.ret == 0 && list.data != null && list.data.Any())
    {
        foreach (var item in list.data)
        {
            <div class="gItem">
                <div class="gPlayTime">@item.gamedate</div>
                <div id="bs_@item.id" class="gMain" gid="@item.id">
                    <div class="cy" style="float: left; margin-left: 1.5rem;">
                        <img src="@item.countryAFlag" />
                        <div>@item.countryAname</div>
                    </div>
                    <img class="vs" src="~/Content/images/vs.png" />
                    <div class="cy" style="float: right; margin-right: 1.5rem;">
                        <img src="@item.countryBFlag" />
                        <div>@item.countryBname</div>
                    </div>
                    <div class="clear0" style="height: 2rem;"></div>
                    <div id="bw_1" class="btnWrap" gid="1" beg="1528988400000">

                        <div class="qBtn w3 v1" v="1">胜</div>
                        <div class="qBtn w3 v2" v="2">平</div>
                        <div class="qBtn w3 v3" v="3" style="margin-right: 0;">胜</div>


                        <div class="clear0"></div>
                    </div>
                    <div style="height: 1.5rem;"></div>
                    <div class="subBtn" onclick="submit(this)">确定提交</div>
                </div>
            </div>

        }
    }

    <div style="color: #666; padding-left:2rem; padding-top:1rem; font-size:1.2rem;">*&nbsp;本次活动仅限于江苏、安徽地区</div>
</div>

<script type="text/javascript">

    function sign() {
        var token = localStorage.getItem("WORLDCUP_TOKEN");
        if (token != 'undefined' && token != '' && token != null) {
            var model = {};
            model.token = token;
            //签到
            $.ajax({
                type: "post",
                url: "/Exec/Sign/",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify(model),
                success: function (result) {
                    layer.alert(result.data);
                }
            });

        } else {
            login();
        }

    }

    function gorank() {
        var token = localStorage.getItem("WORLDCUP_TOKEN");
        if (token != 'undefined' && token != '' && token != null) {

            window.location.href = "/Home/Rank?token=" + token;

        } else {
            login();
        }

    }

    function gojingchai() {
        var token = localStorage.getItem("WORLDCUP_TOKEN");
        if (token != 'undefined' && token != '' && token != null) {

            window.location.href = "/Home/JingChai?token=" + token + "&type=0";

        } else {
            login();
        }

    }

    function gorule() {
        window.location.href = "/Home/ActRule";
    }

    $(".qBtn").click(function () {

        $(this).parent().find(".qBtn").removeClass("qbSel");
        $(this).addClass("qbSel");
    });
    function submit(obj) {
        var token = localStorage.getItem("WORLDCUP_TOKEN");
        if (token != 'undefined' && token != '' && token != null) {
            var gid = $(obj).parent().attr("gid");
            var v = $(obj).parent().find(".qbSel").attr("v");
            if (typeof (v) == "undefined" || v == null) {
                alert("请先选择预测结果");
                return false;
            }

            var model = {};
            model.id = gid;
            model.winnertype = v;
            model.token = token;

            $.ajax({
                type: "post",
                url: "/Exec/Submit",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify(model),
                success: function (result) {
                    console.log(result);
                    if (result.ret == 0) {
                        layer.alert('提交成功');
                    }
                }
            });

        } else {
            login();
        }

    }
</script>